<template>
  <div>
    <div>年度评分趋势</div>
    <div ref="target" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'

const data = ref([
  { "date": "2020年", "value": 54 },
  { "date": "2021年", "value": 23 },
  { "date": "2022年", "value": 89 },
  { "date": "2023年", "value": 12 },
  { "date": "2024年", "value": 67 },
  { "date": "2025年", "value": 45 },
  { "date": "2026年", "value": 32 },
  { "date": "2027年", "value": 78 },
  { "date": "2028年", "value": 56 },
  { "date": "2029年", "value": 90 }
])

const target = ref(null)
let mChart = null
onMounted(() => {
  mChart = echarts.init(target.value)
  renderChart()
})

const renderChart = () => {
  const options = {
    // Y 轴展示选项
    yAxis: {
      name: '(分)',
      nameTextStyle: {
        padding: [0, 30, 0, 0]
      },
      type: 'value',
      // 不展示轴线
      axisLine: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#eee'
        }
      },
      min: 0,
      max: 100,
    },
    // X 轴展示数据
    xAxis: {
      // 数据展示
      type: 'category',
      boundaryGap: false, // 不留白
      data: data.value.map(item => item.date),
    },
    series: [{
      type: 'line',
      smooth: true,
      // 数据配置
      data: data.value.map(item => item.value),
      itemStyle: {
        opacity: 0
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: .8, color: '#e6ecfc' // 0% 处的颜色
            },
            {
              offset: 1, color: '#ffffff' // 100% 处的颜色
            }
          ]
        }
      },
      silent: true
    }]
  }

  mChart.setOption(options)
}

</script>

<style lang="scss" scoped></style>
